v<template>
  <div class="user_list_container">
    <div class="user_list_wrapper">
      <div class="user_list_tool_header">
        <div>
          <el-input placeholder="请输入内容"  v-model="searchText" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="onClickSearch"></el-button>
          </el-input>
        </div>
        <div>
          <el-button type="primary"
          @click="dialogFormVisible = true">添加用户</el-button>
        </div>
      </div>
      <div class="user_list_table_container">
         <el-table
         border
         :data="showList"
         style="width: 100%">
           <el-table-column
           prop="number"
           label="#"
           width="40">
           </el-table-column>
           <el-table-column
           prop="name"
           label="姓名">
           </el-table-column>
           <el-table-column
           prop="email"
           label="邮箱">
           </el-table-column>
           <el-table-column
           prop="mobile"
           label="电话号码">
           </el-table-column>
           <el-table-column
           prop="member"
           label="角色">
           </el-table-column>
           <el-table-column
           prop="status"
           label="状态">
             <template slot-scope="prop">
              <el-switch
              v-model="prop.row.status"
              @change="onUserStatusChange"> 
              </el-switch>
             </template>
           </el-table-column>
           <el-table-column
           label="操作"
           width="200px">
            <template slot-scope="prop">
              <el-button type="primary" 
              icon="el-icon-edit" 
              size="mini"
              @click="onClickEdit(prop.$index)"></el-button>
              <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
              <el-button type="warning" icon="el-icon-star-off" size="mini"></el-button>
            </template>
           </el-table-column>
         </el-table>
      </div>
      <div>
        <el-pagination
        background
        layout="prev, pager, next"
        :total="userList.length"
        :page-size="3"
        @current-change="onCurrentChange"
        @next-click="onNextClick">
        </el-pagination>
      </div>
    </div>
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item> 
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password"></el-input>
        </el-form-item> 
         <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email"></el-input>
        </el-form-item> 
         <el-form-item label="手机号" prop="mobile">
          <el-input v-model="ruleForm.mobile"></el-input>
        </el-form-item> 
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onClickConfirm">确 定</el-button>
     </div>
</el-dialog>
<el-dialog title="修改信息" :visible.sync="dialogEditVisible">
      <el-form :model="editUser" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="editUser.name" disabled></el-input>
        </el-form-item> 
         <el-form-item label="邮箱" prop="email">
          <el-input v-model="editUser.email"></el-input>
        </el-form-item> 
         <el-form-item label="手机号" prop="mobile">
          <el-input v-model="editUser.mobile"></el-input>
        </el-form-item> 
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditVisible = false">取 消</el-button>
        <el-button type="primary" @click="onClickEditConfirm">确 定</el-button>
     </div>
</el-dialog>
  </div>
</template>

<script>
export default {
  data(){
    return{
      dialogFormVisible:false,
      dialogEditVisible:false,
      userList:JSON.parse(localStorage.getItem("users")) || [],
      showList:[],
      editUser:{},
      startIndex:0,
      endIndex:3,
      pageSize:3,
      searchText:"",
      ruleForm:{
        name:"",
        password:"",
        email:"",
        mobile:""
      },
      rules:{
        name:[
          {required:true, message:'请输入活动名称',trigger: 'blur' }
        ],
        password:[
          {required:true,min:6,max:18,message: '长度在 6 到 18 个字符',trigger:'blur'}
        ],
        email:[
          {required:true,validator:this.validatorEmail,trigger:'blur'}
        ],
        mobile:[
          {required:true,validator:this.validatorMobile,trigger:'blur'}
        ]
      }
    }
  },
  methods:{
    validatorEmail(rule,value,callback){
      var reg =/^[A-Za-zd0-9]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,5}$/;
      if(reg.test(value)){
        callback();
      }else{
        callback(new Error("请输入正确邮箱"));
      }
    },
    validatorMobile(rule,value,callback){
      var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
      if (myreg.test(value)){
        callback();
      }else{
        callback(new Error("请输入正确的手机号"));
      }
    },
    onClickConfirm(){
      this.dialogFormVisible = false;
      var index  = localStorage.getItem("index");
      if(!index){
        index = 1;
      }else{
        index++;
      }
      localStorage.setItem("index",index)
      var flag = false;
      this.userList.forEach(element => {
        if(element.name===this.ruleForm.name ||
        element.email===this.ruleForm.email ||
        element.mobile===this.ruleForm.mobile){
          flag = true
        }
      });

      if(!flag){
        var temp = {
             number:index,
             name:this.ruleForm.name,
             email:this.ruleForm.email,
             mobile:this.ruleForm.mobile,
             member:"普通用户",
            status:0
           };
        console.log("11111")
        this.userList.push(temp)
        localStorage.setItem("users",JSON.stringify(this.userList))
      }else{
         this.$message({
            showClose: true,
            message: '错了哦，这是一条错误消息',
            type: 'error'
           });
      }
    },
    onCurrentChange(page){
      console.log(page)
      this.startIndex = (page-1)*3;
      this.endIndex = page*3;

      this.showList = [];
      for(let index=this.startIndex;index<this.endIndex;index++){
        this.showList.push(this.userList[index])
      }
    },
    onNextClick(){

    },
    onUserStatusChange(){
     localStorage.setItem("users",JSON.stringify(this.userList))
    },
    onClickSearch(){
      if(this.searchText.length === 0){
        this.$message({
          showClose: true,
          message: '搜索内容不能为空',
          type: 'error'
        });
        return;
      }
      // var tempArray = []
      this.showList = [];
      this.userList.forEach(element =>{
        if(this.searchText===element.name ||
        this.searchText===element.mobile ||
        this.searchText===element.email){
          this.showList.push(element);
        }
      })
    },
    onClickEdit(index){
      console.log(index);
      this.dialogEditVisible = true
      this.editUser = this.showList[index];
    },
    onClickEditConfirm(){
      this.dialogEditVisible = false;
      localStorage.setItem("users",JSON.stringify(this.userList))
    }
  },
  mounted(){
    for(let index=this.startIndex;index<this.endIndex;index++){
      this.showList.push(this.userList[index])
    }
  }
}
</script>

<style scoped>
.user_list_container
{
  width: 100%;
  height: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.user_list_wrapper
{
  width: 100%;
  height: 80vh;
  background-color: white;
}

.user_list_tool_header
{
  width: 100%;
  height: 60px;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
}

.user_list_tool_header div
{
  margin-left: 5px;
  margin-right: 10px;
}

.user_list_table_container
{
  margin: 10px;
}
</style>


